<template>
  <div class="AddOrUpdate_main add_container add_container_table column_three">
    <div class="main_main ">
      <el-form ref="form" :model="showData" :inline="true">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(item,index) in showKey" :key="index" :label="item.name" :name="index+1+''">
            <!--            <div v-if="showData.status!=0 && index==0 && showData.isApprovalShow!=1" class="audit_process">-->
            <!--              <span>审批进程</span>{{ showData.approvalUserName }}  {{ showData.approvalName }}-->
            <!--            </div>-->
            <div />
            <div
              v-for="(item2,index2) in item.columns"
              :key="index2"
              :class="getClass(item2)"
            >
              <el-form-item v-if="item2.type=='form'" :label="item2.name">
                <div v-if="!showData[item2.key]&&showData[item2.key]!==0&&showData[item2.key]!=='0'" class="show noData">暂无</div>
                <div v-else class="show">{{ showData[item2.key] }}</div>
              </el-form-item>
              <el-form-item v-if="item2.type=='formData'" :label="item2.name">
                <div v-if="!showData.saleCustomerListVo||!showData.saleCustomerListVo[item2.key]" class="show noData">暂无</div>
                <div v-else class="show">{{ showData.saleCustomerListVo[item2.key] }}</div>
              </el-form-item>
              <el-form-item v-if="item2.type=='formData2'" :label="item2.name">
                <div v-if="!showData.defaultSaleDeliverInformation||!showData.defaultSaleDeliverInformation[item2.key]" class="show noData">暂无</div>
                <div v-else class="show">{{ showData.defaultSaleDeliverInformation[item2.key] }}</div>
              </el-form-item>
              <el-form-item v-if="item2.type=='file'" :label="item2.name">
                <FileManageFull
                  :file-names="formData.fileName"
                  :file-real-names="formData.fileRealName"
                  :file-urls="formData.fileUrl"
                  :row-index="1"
                  :readonly="!canEditFile"
                  @fileName="setFileName"
                />
              </el-form-item>
              <el-form-item v-if="item2.type=='file1'" :label="item2.name">
                <FileManageFull
                  :file-names="formData.orderFileName"
                  :file-real-names="formData.orderFileRealName"
                  :file-urls="formData.orderUrl"
                  :row-index="1"
                  :readonly="!canEditFile"
                  @fileName="setFileName2"
                />
              </el-form-item>
              <div v-if="item2.type=='table'" class="formItem_header">
                {{ item2.name }}
              </div>
              <div v-if="item2.type=='table'" ref="table_container" class="table_container">
                <el-table
                  ref="table"
                  :data="showData[item2.key]"
                  stripe
                  border
                  row-key="id"
                  style="width: 99.9%;"
                  :summary-method="getSummaries"
                  :show-summary="true"
                >
                  <!-- <el-table-column label="" min-width="70" /> -->
                  <el-table-column label="状态" min-width="80" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <div v-if="scope.row.status=='2'" class="adequate_space">
                        <span>全部收款</span>
                      </div>
                      <div v-if="scope.row.status=='1'" class="under_execution">
                        <span>部分收款</span>
                      </div>
                      <div v-if="scope.row.status=='0'" class="pending_payment">
                        <span>待收款</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="开票日期" min-width="140" prop="invoiceTime">
                    <template slot-scope="scope">
                      <span>{{ scope.row.invoiceTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="发票号码" min-width="140" prop="invoiceCode" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.invoiceCode }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="发票金额" min-width="140" prop="invoicePrice" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.invoicePrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="附件"
                    min-width="120"
                  >
                    <template slot-scope="scope">
                      <FileManage
                        :file-names.sync="scope.row.fileName"
                        :file-real-names.sync="scope.row.fileRealName"
                        :file-urls.sync="scope.row.fileUrl"
                        :row-index="scope.$index"
                        :readonly="true"
                        @fileName="setFileName3"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" min-width="140" prop="remark">
                    <template slot-scope="scope">
                      <span>{{ scope.row.remark }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="100">
                    <template slot-scope="scope">
                      <div class="blueColor" @click="payOrder(scope.row,scope.$index)">跟进付款</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="已收款" min-width="140" prop="hasPrice" align="right">
                    <template slot-scope="scope">
                      <span>{{ scope.row.hasPrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="未收款" min-width="140" prop="unPrice" align="right">
                    <template slot-scope="scope">
                      <span>{{ scope.row.unPrice }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-if="item2.type==='table2'&&item2.name" class="formItem_header">
                {{ item2.name }}
              </div>
              <div v-if="item2.type==='table2'" ref="table_container" class="table_container" :class="!item2.name?'padding_class':''">
                <el-table
                  ref="table"
                  :data="showData[item2.key]"
                  stripe
                  border
                  row-key="id"
                >
                  <el-table-column
                    v-for="(item3,index3) in item2.columns"
                    :key="index3"
                    :prop="item3.key"
                    :label="item3.name"
                    :min-width="item3.minWidth||100"
                    :show-overflow-tooltip="true"
                    :align="item3.align"
                  />
                </el-table>
              </div>
              <div v-if="item2.type=='review'&&showData.taskList&&showData.taskList.length>0" class="review_container">
                <div
                  v-for="(item3,index3) in showData[item2.key]"
                  :key="index3"
                  class="review_item"
                >
                  <div class="review_item_left" :class="item3.taskNoName=='发起审批'?'initiateApproval':''">
                    <div
                      class="review_item_left_top "
                      :style="{background:colorList.filter(iitem=>iitem.name==item3.approvalStatus).length>0?
                        colorList.filter(iitem=>iitem.name==item3.approvalStatus)[0].color:'#387BFC'}"
                    >
                      <svg-icon v-if="index3==0" icon-class="发起审批" />
                      <svg-icon v-if="index3!=0 && index3!=showData.taskList.length-1" icon-class="审批节点" />
                      <svg-icon v-if="index3==showData.taskList.length-1" icon-class="审批未结束" class="end_approval" />
                      <!-- <svg-icon v-if="index3==showData.taskList.length-1" icon-class="审批未结束" class="end_approvaled" /> -->
                    </div>
                    <div class="review_item_left_bottom">
                      <div v-if="index3!=showData[item2.key].length-1" class="review_item_left_bottom_schedule" />
                    </div>
                  </div>
                  <div class="review_item_right">

                    <div v-if="item3.taskNoName=='发起审批'" class="reviewStart_item_right_top">
                      <div>{{ item3.taskNoName }}</div>
                      <div class="review_time">{{ item3.taskList[0].approvalTime }}</div>
                    </div>
                    <div v-else class="review_item_right_top">
                      <div class="review_item_right_top_1">{{ item3.deptName }}</div>
                      <div class="review_item_right_top_3">
                        <span class="taskNoName_content">{{ item3.taskNoName }}</span>
                        <el-tag v-if="item3.signWay==1 " size="mini" class="tag_content">会签</el-tag>
                        <el-tag v-else-if="item3.signWay==0 " size="mini" class="tag_content">或签</el-tag>
                        <span v-if="item3.approvalStatusName=='审批中'" class="approvalStatusName">({{ item3.approvalStatusName }})</span>
                        <span v-if="item3.approvalStatusName=='待审批'" class="approvalStatusName2">({{ item3.approvalStatusName }})</span>
                      </div>
                    </div>
                    <div class="review_item_right_bottom">
                      <div class="review_item_right_bottom_name">

                        <!-- 审批通过或审批拒绝 -->
                        <div v-for="(ele,i) in item3.taskList" :key="i" class="approve_person_content">
                          <div v-if="ele.approvalStatus==3 || ele.approvalStatus==4">
                            <div class="approve_person_info">
                              <div class="approve_person_img">
                                <el-avatar v-if="ele.avatarUrl" :src="ele.avatarUrl" icon="el-icon-user-solid" class="icon_user" />
                                <el-avatar v-else icon="el-icon-user-solid" class="icon_user" :size="50" />
                                <div class="svg_error">
                                  <svg-icon v-if="ele.approvalStatus==4 || ele.approvalStatus==1" icon-class="通过" />
                                  <svg-icon v-if="ele.approvalStatus==2" icon-class="执行中灰" />
                                  <svg-icon v-if="ele.approvalStatus==3" icon-class="驳回" />
                                </div>
                              </div>
                              <div class="company_name">{{ ele.realName }}</div>
                              <div class="option_name">
                                <span>{{ ele.deptName }}</span>
                                <!-- <el-tooltip content="所属部门,所属部门所属部门" placement="top">
                                  <div>所属部门所属部门所属部门所属部门</div>
                                </el-tooltip> -->
                              </div>

                            </div>
                          </div>
                          <div>
                            <div v-if="ele.approvalContent" class="arrowbox1-left">
                              <p class="company_name">审批意见</p>
                              <p>{{ ele.approvalContent }}
                              </p>
                            </div>
                            <div v-if="ele.approvalContent" class="approvalTime">{{ ele.approvalTime }}</div>
                          </div>
                        </div>

                        <!-- 未审批或已经被人审批 -->
                        <div class="Reviewed">
                          <div v-for="(ele2,ind) in item3.taskList" :key="ind">
                            <div v-if="ele2.approvalStatus==2 || ele2.approvalStatus==1" class="approve_person_content">
                              <div class="approve_person_info">
                                <div class="approve_person_img">
                                  <el-avatar v-if="ele2.avatarUrl" :src="ele2.avatarUrl" icon="el-icon-user-solid" class="icon_user" />
                                  <el-avatar v-else icon="el-icon-user-solid" class="icon_user" :size="50" />
                                  <div class="svg_error">
                                    <svg-icon icon-class="执行中灰" />
                                  </div>
                                </div>
                                <div class="company_name">{{ ele2.realName }}</div>
                                <div class="option_name">
                                  <span>{{ ele2.deptName }}</span>
                                  <!-- <el-tooltip content="所属部门,所属部门所属部门" placement="top">
                                <div>所属部门所属部门所属部门所属部门</div>
                              </el-tooltip> -->
                                </div>
                              </div>
                            </div>
                          </div>

                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
    <div v-if="isSaleOrder" class="main_bottom" :class="canAudit?'':'main_bottom1'">
      <div v-if="canAudit">
        <el-button type="reject" @click.stop="onSubmit('2')">驳回</el-button>
        <el-button class="buttom_success" @click.stop="onSubmit('1')">通过</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Big from 'big.js'
import followPay from '@/views/receivableAndPayable/receipt/showFollowPay'
import { addOrUpdate, review } from '@/api/receivableAndPayable/receivableAndPayableManage/paymentOrder'
// import { getPrintlist } from '@/api/saleManage/saleSend'
// import { getReportUrl } from '@/api/superManage/reportForm'
// import Audit from './audit.vue'
export default {
  name: 'ShowDetail',
  props: {
    layerid: {},
    showKey: {},
    showData: {},
    data: {},
    isSaleOrder: {},
    businessId: {}
  },
  data() {
    return {
      printTabledata: [], // 打印列表数据
      pageData: {
        pageNum: 1,
        pageSize: 5,
        modelName: '付款单'
      },
      formData: {
        fileName: '',
        fileRealName: '',
        url: ''
      },
      canEditFile: false, // 是否能够修改附件
      canAudit: false,
      printTableHeight: '0',
      selectionsAll: [], // 表格所有页选中的行
      total: 0, // 打印合计次数
      pageId: '查看', // 页面唯一标识
      activeName: '1',
      num: '',
      colorList: [
        // 待审批和未审批
        { name: '0', color: '#999999' },
        { name: '1', color: '#999999' },
        // 审批中和审批完成
        { name: '2', color: '#387BFC' },
        { name: '3', color: '#387BFC' },
        { name: '4', color: '#387BFC' },
        { name: '5', color: '#00BE6F' }
      ]
    }
  },
  created() {
    if (this.showData.approvalUserId && this.showData.status != 7) {
      const arr = this.showData.approvalUserId.split(',')
      arr.map((item) => {
        if (item == this.$store.state.user.userId) {
          this.canAudit = true
        }
      })
    }
    if (this.showData.status == '0' || this.showData.taskList.length == 0 || this.showData.isApprovalShow == 1) {
      this.showKey.splice(2, 1)
    }
    Object.keys(this.formData).forEach((key) => {
      // 给右边数据赋值
      this.formData[key] = this.showData[key]
    })
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 分页切换
    handleCurrentChange(val) {
      this.pageData.pageNum = val
      this.getList()
    },
    payOrder(row, index) {
      this.currentIndex = index
      this.$layer.iframe({// 弹框
        content: {
          content: followPay, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            row: row.follows
          }// props
        },
        area: ['1320px', '350px'],
        title: '跟进付款', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    closeDialog(data) {
      var obj = {}
      obj.formType = this.showData.approvalTask.formType
      obj.taskNoGroup = this.showData.approvalTask.taskNoGroup
      obj.taskNo = this.showData.approvalTask.taskNo
      obj.approvalTemplateId = this.showData.approvalTask.approvalTemplateId
      obj.formId = this.showData.approvalTask.formId
      obj.userId = this.$store.state.user.userId
      obj.version = this.showData.approvalTask.version
      // obj.approvalContent = data
      obj.approvalStatus = this.num
      if (data) {
        obj.approvalContent = data
      } else {
        if (this.num == 1) {
          obj.approvalContent = '已通过'
        } else {
          obj.approvalContent = '已驳回'
        }
      }
      review(obj).then(res => {
        this.$layer.close(this.layerid)// 关闭弹框
        this.$message.success(res.msg)
        this.$parent.getList()
      })
    },
    // 提交
    preserve() {
      Object.keys(this.formData).forEach((key) => {
        // 给右边数据赋值
        this.showData[key] = this.formData[key]
      })
      addOrUpdate({ ...this.showData }).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        this.$layer.close(this.layerid) // 关闭弹框
        this.$parent.getList() // 调用父组件的刷新方法
      })
    },
    // onSubmit(num) {
    //   this.num = num
    //   // console.log(this.showData)
    //   this.$layer.iframe({// 弹框
    //     content: {
    //       content: Audit, // 传递的组件对象
    //       parent: this, // 当前的vue对象
    //       data: {
    //         num: num
    //       }// props
    //     },
    //     area: ['440px', '300px'],
    //     title: '审批意见', // 标题
    //     shadeClose: false // 点击遮罩是否关闭
    //   })
    // },
    // 合计行
    getSummaries(param) {
      const {
        columns,
        data
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index == 0) {
          sums[index] = '合计'
          return
        }
        switch (column.property) {
          case 'invoicePrice':
            sums[index] = data.map(item => item.invoicePrice).reduce((prev, curr) => {
              if (curr) {
                return new Big(prev).plus(curr).toString()
              } else {
                return new Big(prev).toString()
              }
            }, 0)
            break
        }
        switch (column.property) {
          case 'hasPrice':
            sums[index] = data.map(item => item.hasPrice).reduce((prev, curr) => {
              if (curr) {
                return new Big(prev).plus(curr).toString()
              } else {
                return new Big(prev).toString()
              }
            }, 0)
            this.formData.hasPrice = Number(sums[index])
            break
        }
        switch (column.property) {
          case 'unPrice':
            sums[index] = data.map(item => item.unPrice).reduce((prev, curr) => {
              if (curr) {
                return new Big(prev).plus(curr).toString()
              } else {
                return new Big(prev).toString()
              }
            }, 0)
            break
        }
        switch (column.property) {
          case 'invoicePrice':
            sums[index] = data.map(item => item.invoicePrice).reduce((prev, curr) => {
              if (curr) {
                return new Big(prev).plus(curr).toString()
              } else {
                return new Big(prev).toString()
              }
            }, 0)
            this.formData.hasReceiptPrice = Number(sums[index])
            break
        }
      })
      return sums
    },
    setFileName(...data) {
      this.formData.fileName = data[0]
      this.formData.fileRealName = data[1]
      this.formData.fileUrl = data[2]
    },
    setFileName2(...data) {
      this.formData.orderFileName = data[0]
      this.formData.orderFileRealName = data[1]
      this.formData.orderUrl = data[2]
    },
    setFileName3(...data) {
      this.showData.listData[data[3]].fileName = data[0]
      this.showData.listData[data[3]].fileRealName = data[1]
      this.showData.listData[data[3]].fileUrl = data[2]
    },
    getClass(item) {
      let res = ''
      if (item.type == 'form' || item.type == 'formData' || item.type == 'formData2') {
        res += 'showItem'
        if (item.length && item.length == 'double') {
          res += ' double'
        }
      } else if (item.type == 'table') {
        res += 'showTableTwo'
      } else {
        res += 'showTable'
      }
      return res
    },
    cancel() {
      this.$layer.close(this.layerid) // 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.pending_payment {
  color: #387bfc;
}
.under_execution {
  color:#FF9900;
}
.adequate_space {
  color: #19be6b;
}
.insufficient_space {
  color: rgb(231, 108, 108);
}
.insufficient_space2 {
  color: rgb(255, 151, 32);
}
.revoke_space {
  color: #999999;
}
/deep/.blueColor{
  color: #387bfc;
}
/deep/.blueColor:hover {
  cursor: pointer;
}
/deep/ .el-image {
  height: 30px !important;
}
.Reviewed{
  display: flex;
  // margin-top: 10px;
}
.approve_person_info{
  text-align: center;
  width: 80px;
  margin-bottom: 10px;
}
.audit_process{
  width: 30%;
  height: 50px;
  color:#333;
  margin-top: 20px;
  margin-left: 10px;
  margin-right:50% ;
  padding: 15px;
  background: rgb(234,245,255);
  border-radius: 8px;
  span{
    color: #1F51B3;
    margin-right: 15px;
  }
}
.arrowbox1-left {
  position: relative;
  display: inline-block;
  // margin: -3.5em 0 1.5em 150px;
  // margin-left: 5px;
  height: fit-content;
  padding: 10px 10px;
  min-height: 60px;
  min-width: 150px;
  // max-width: 100%;
  color: #555;
  font-size: 16px;
  background: rgb(234,245,255);
  border-radius: 8px;
}

.arrowbox1-left:before {
  content: "";
  position: absolute;
  top: 30px;
  left: -15px;
  margin-top: -15px;
  border: 10px solid transparent;
  border-right: 10px solid #e0f2ff;
}

.arrowbox1-left p {
  margin: 0;
  padding: 0;
  color: #9899A1;

}
.tag_content{
  margin-left: 15px;
  // margin-right: 15px;
}
.approvalStatusName{
  margin-left: 15px;
  font-size: 12px;
  color: #387BFC;
}
.approvalStatusName2{
  margin-left: 15px;
  font-size: 12px;
  color: #999999;
}
.approve_person_content{
  display: flex;
  // width: 100%;
  // margin-bottom: 10px;
}
.approve_person_img{
  position: relative;
  width: 50px;
  height: 50px;
  margin-left: 15px;
}
.icon_user{
  font-size: 40px;
}
.el-avatar{
  width: 50px;
  height: 50px;
}
.svg_error{
  position: absolute;
  right: -5px;
  bottom:-3px ;
}
.option_name{
  font-size: 14px ;
  color: #9899A1;
  width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.approvalTime{
  color: #9899A1;
  font-size: 14px;
  margin-left: 10px;
}
.company_name  {
  font-size: 14px ;
  color: #6B6A6F !important;
  margin: 5px 0;
  width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.end_approval{
  font-size: 16px;
  color: #ffffff;
}
.end_approvaled{
  font-size: 16px;
  color: #ffffff;
}
.svg_father{
  width: 50px;
  height: 50px;
  position: relative;
}
.svg_content{
  position: absolute;
  left: 30px;
  top: 23px;
}
.print_pagination{
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .print_total{
    margin-left: 15px;
    color: #333;
    font-size: 15px;
  }
}
.main_bottom{
  justify-content: end;
}
.main_bottom1{
  justify-content: end;
}
/deep/.el-table__empty-block{
  border-bottom:1px solid #dfe6ec;
}
/deep/ .el-table__fixed-footer-wrapper {
  .el-table__cell:last-of-type {
    height: 39px !important;
  }
}
/deep/ .el-step__title{
  line-height: 28px;
}
/deep/ .is-process{
  font-weight: normal;
}
/deep/ .is-icon{
  width:24px ;
}
.step_text2_color2{
  color: #999 !important;
}
.nopass{
  color: #F56C6C;
}
.pass{
  color:#19BE6B ;
}
.name{
  color: #333333;
}
.time{
  color: #333333;
}
/deep/ .is-text{
  border: none;
}
.step{
  width: 100%;
  margin:20px;
  padding: 20px 0;
  background: rgb(241,249,255);
  border: 1px solid rgb(203,231,255);
  border-radius: 4px;
  .step_text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    // margin-left: -90%;
  }
  .step_text2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    // margin-left: -70%;
  }
}
/deep/ .el-step__icon{
  background: rgb(241,249,255) !important;
}
/deep/ .el-tabs__content{
  overflow: auto;
}
.main_main{
  padding-top: 0px;
  .el-form{
    height: 100%;
    align-content: flex-start;
    .showItem{
      margin-left: 20px;
      margin-right: 20px;
      width: calc(33.33% - 40px);
    }

    /deep/ .el-form-item{
      width: 100%;
      border-bottom: 1px solid #D6D6D6;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
      .el-form-item__label:before{
        content: none;
      }
      .el-form-item__label{
        color: #1F51B3;
        font-size: 15px;
      }
      .el-form-item__label{
        width: 140px !important;
        margin-top: 10px;
      }
      .el-form-item__content{
        word-break: break-all;
        color: #333333;
        font-size: 15px;
        flex: 1;
        width: unset;
        margin-right: 0px;
      }
    }
    .double{
      width: calc(100% - 40px);
      //height: auto;
      ///deep/ .el-form-item__content{
      //  height: auto;
      //}
      ///deep/ .el-form-item{
      //  height: auto;
      //}
      //.show{
      //  overflow: hidden;
      //  text-overflow: ellipsis;
      //  display: -webkit-box;
      //  -webkit-line-clamp: 2;
      //  -webkit-box-orient: vertical;
      //}
    }
    .showTableTwo {
      width: 100% !important;
      /deep/  .el-form-item{
        margin-left: 10px !important;
        padding-right: 10px !important;
      }
      /deep/ .table_container{
        padding-bottom: 20px !important;
      }
    }
    .showTable{
      width: 100%;
      /deep/  .el-form-item{
        margin-left: 20px !important;
        margin-right: 20px !important;
        width: auto;
      }
    }
  }
  .column_one{
    .showItem{
      width: 100% !important;
    }
  }
  /deep/ .el-tab-pane{
    align-content: flex-start;
  }
}
.column_one{
  .showItem{
    width: 100% !important;
  }
}
.show{
  height: fit-content !important;
  padding-top: 10px;
  padding-bottom: 10px;
}
.FileManageFull_container{
  padding-top: 10px;
  padding-left: 10px;
}
.noData{
  color: #c0c4cc;

}
///deep/.el-table__cell:nth-of-type(1){
//  .cell{
//    padding-left: 23px !important;
//  }
//}

/deep/ .el-tabs{
  height: 100%;
}

/deep/ .el-tabs__header{
  margin: 0;
}
.el-table {
  font-size: 15px;
}
.main_main{
  padding-top: 0px;
  .el-form{
    height: 100%;

    .showItem{
      margin-left: 20px;
      margin-right: 20px;
      width: calc(33.33% - 40px);
    }

    /deep/ .el-form-item{
      width: 100%;
      border-bottom: 1px solid #D6D6D6;
      margin: 0;
      min-height: 50px;
      padding-top: 10px;

      .el-form-item__label:before{
        content: none;
      }

      .el-form-item__label{
        color: #1F51B3;
        font-size: 15px;
      }
      .el-form-item__content{
        word-break: break-all;
        color: #333333;
        font-size: 15px;
        flex: 1;
        width: unset;
        margin-right: 0px;

        .show{
          height: fit-content !important;
        }
      }
    }
    .double{
      width: calc(100% - 40px);
      height: auto;
      /deep/ .el-form-item__content{
        height: auto;
      }
      /deep/ .el-form-item{
        height: auto;
      }

    }
    .formItem_header{
      margin-left: 0px;
      padding-left: 20px;
      font-size: 18px;
    }
  }
  /deep/ .el-tab-pane{
    align-content: flex-start;
  }
}
.padding_class{
  padding-top: 20px;
}
/deep/ .el-tabs{
  overflow-y: hidden;
  height: 100%;
  .el-tabs__content{
    height: calc(100% - 40px);
  }
}
/deep/ .el-tabs__header{
  margin: 0;
}
.taskNoName_content{
  font-size: 16px;
  color: #000;
}
.review_container{
  padding-top: 20px;
  .review_item{
    margin-left: 20px;
    display: flex;

    .review_item_left{

      .review_item_left_top{
        width: 30px;
        height: 30px;
        border-radius: 20px;
        background: #387BFC;
        display: flex;justify-content: center;align-items: center;
      }
      .review_item_left_bottom{
        height: calc(100% - 30px);
        display: flex;justify-content: center;align-items: center;
        .review_item_left_bottom_schedule{
          width: 2px;
          height: 85%;
          background: #D8D8D8;
        }
      }
    }
    .review_item_right{
      margin-left: 20px;
      width: 100%;
      padding-bottom: 5px;
      .reviewStart_item_right_top{
        display: unset !important;
        align-items: center;
        margin-bottom: -10px;
        font-size: 16px;
        .review_time{
          margin-top: 2px;
          font-size: 14px;
          color: #999999;
        }
      }
      .review_item_right_top{
        display: flex;align-items: center;
        height: 30px;
        font-size: 14px;color: #999999;
        margin-bottom: 20px;
        .review_item_right_top_1{
          display: flex;align-items: center;
          color: #333333;
        }
        .review_item_right_top_2{
          display: flex;align-items: center;
          margin: 0 5px;font-size: 20px;
        }
        .review_item_right_top_3{
          display: flex;align-items: center;
        }
      }
      .review_item_right_bottom{

        margin: 10px 20px 20px 0;
        .review_item_right_bottom_name{
          // display: flex;justify-content: space-between;
          .name_left{
            display: flex;align-items: center;
            .name_left_avatar{
              .showPic{
                width: 50px;
                height: 50px;
                border-radius: 4px;
              }
            }
            .name_left_name{
              margin-left: 20px;
              font-size: 14px;
              color: #333333;
            }
          }
          .name_right{
            font-size: 14px;
            color: #666666;
            display: flex;align-items: center;justify-content: flex-end;
            .name_right_status{
              margin-right: 20px;
            }
          }
        }

        .review_item_right_bottom_content{
          margin-top: 10px;
          width: 100%;
          word-break:break-all;
          color: #666666;
          font-size: 14px;
        }
      }
    }
  }
  .review_item.opacity{
    opacity: 0.5;
  }
}
.el-table {
  font-size: 15px;
}
.noData{
  color: #c0c4cc;
}
</style>
<style scoped>
.initiateApproval{
  margin-top: 5px;
}
.buttom_success{
  background-color: #13ce66;
}
</style>
